<template>
    <div id="life">

        <h2>这是一个life组件</h2>
        生命周期函数的演示 -- {{msg}}

        <button @click="setMsg">执行方法改变msg</button>
    </div>
</template>


<script>
    export default {
        name: "app",
        data() {
            return {
                msg: "我是一个生命周期函数组件"
            };
        },
        methods: {
            setMsg() {
                this.msg = "这是一个改变后的数据";
            }
        },
        //   生命周期函数创建之前
        beforeCreate() {
            console.log("实力创建之前0");
        },
        created() {
            console.log("实力创建完成1");
        },
        beforeMount() {
            //   请求数据，操作dom。
            console.log("模板编译渲染之前2");
        },
        mounted() {
            console.log("模板渲染完成3");
        },
        beforeUpdate() {
            console.log("数据更新之前4");
        },
        updated() {
            console.log("数据更新完成5");
        },
        beforeDestroy() {
            console.log("实力销毁之前6");
        },
        destroyed() {
            console.log("实力销毁完成7");
        }
    };
</script>